<template>
  <div class="newMember">
    <div class="newMember-title">
      <div class="newMember-title-left">
        <span>新增会员注册数量</span>
        <span>({{total}})</span>
      </div>
      <div class="newMember-title-right">
        <div class="export-btn" @click="exportData">
          <img src="../../../assets/img/export.png" alt>
          <span>导出</span>
        </div>
      </div>
    </div>
    <div class="newMember-main">
      <div class="newMember-main-top">
        <el-form :model="form" ref="form" label-width="100px" class="search-form clearfix">
          <div class="search-form-left">
            <div class="search-item">
              <span class="input-lable registerTime">注册时间段</span>
              <el-date-picker v-model="form.startdate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
              <span class="separator">~</span>
              <el-date-picker v-model="form.enddate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
            </div>
            <div class="search-item">
              <span class="input-lable ageBracket">年龄段</span>
              <el-input v-model="form.minage" placeholder="请选择" class="search-age" :clearable="true" @change="handleChangeInput"></el-input>
              <span class="separator">~</span>
              <el-input v-model="form.maxage" placeholder="请选择" class="search-age" :clearable="true" @change="handleChangeInput2"></el-input>
            </div>
          </div>
          <div class="search-form-right">
            <div class="search-item">
              <span class="input-lable">性 &nbsp;&nbsp;别</span>
              <el-select v-model="form.sex" placeholder="请选择" clearable>
                <el-option v-for="item in sexOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
            <div class="search-item">
              <span class="input-lable set-left">学 &nbsp;&nbsp;历</span>
              <el-select v-model="form.qualification" placeholder="请选择" clearable>
                <el-option v-for="item in educationOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
            <div class="search-item">
              <span class="input-lable">居住地</span>
              <!-- <el-cascader :options="addressOptions" v-model="regions" :show-all-levels="false" :clearable="true" :props="addressProps" :change-on-select="true" @change="changeCity()"></el-cascader> -->
              <city-Cascader :citys="form.citys" :level="level" :notRequire="true" @handleChange="handleCityChange"></city-Cascader>
            </div>
            <div class="search-item">
              <el-button type="primary" class="search-btn" @click="search()">查询</el-button>
            </div>
          </div>
        </el-form>
      </div>
      <div class="newMember-main-bottom" v-loading="loading">
        <el-table class="new-Member-table" :data="tableData" border stripe size="small">
          <el-table-column  prop="nickname" label="注册会员名称" align="center"></el-table-column>
          <el-table-column  label="性别" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.sex | filterSex}}</span>
            </template>
          </el-table-column>
          <el-table-column  label="出生日期" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.birthdate}}</span>
            </template>
          </el-table-column>
          <el-table-column  prop="region" label="居住地" align="center"></el-table-column>
          <el-table-column  prop="telnum" label="注册手机号" align="center"></el-table-column>
          <el-table-column  label="注册时间" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.registertime}}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.pagenum" :page-sizes="[10, 20, 30, 50, 100]" :page-size="form.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total" background></el-pagination>
      </div>
    </div>
  </div>
</template>

<style scoped src="./index.css">
</style>

<script src="./index.js">
</script>
